@import './reset.scss';
@import './mixin.scss';
@import './variables.scss';
@import './vant.scss';

html {
      @include root-font-size();
}

#app {
      height: 100vh;
      width: 100%;
      overflow: hidden;
      overflow-y: auto;
}
.layout-common-bg {
      position: fixed;
      top: -5%;
      left: 0;
      right: 0;
      z-index: -222;
}
//@author TalkTao


.flex-shrink-0 {
      flex-shrink: 0;
}

.flex-grow-0 {
      flex-grow: 0;
}

.flex-grow-1 {
      flex-grow: 1;
}

.flex-column {
      flex-direction: column;
}

.flex-wrap {
      flex-wrap: wrap;
}

.object-fit-cover {
      object-fit: cover;
}

.border-box {
      box-sizing: border-box;
}

.fw-bold {
      font-weight: bold;
}

.w-0 {
      width: 0;
}

.w-100 {
      width: 100%;
}

.w-50 {
      width: 50%;
}

.h-100 {
      height: 100%;
}

.text-ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
}

.text-again-center {
      text-align: center;
}

.flex-column {
      flex-direction: column;
}

@each $key, $val in $fontSizeS {
      .fs-#{$key} {
            font-size: #{$val};
      }
}

//.d-flex {display: flex;}
@each $item in $displayList {
      .d-#{$item} {
            display: #{$item};
      }
}

//.flex-center {justify-content: center;}
@each $commonKey, $commonVal in $flexCommonValues {
      .flex-#{$commonKey} {
            display: flex;
            justify-content: #{$commonVal};
            align-items: #{$commonVal};
      }

      .align-self-#{$commonKey} {
            align-self: #{$commonVal};
      }
}

//.justify-content-between {justify-content: sapce-between;}
@each $key, $val in $justify-content-values {
      .justify-content-#{$key} {
            justify-content: #{$val};
      }
}

//.align-items-start {align-items-start: flex-start;}
@each $key, $val in $align-items-values {
      .align-items-#{$key} {
            align-items: #{$val};
      }
}

//.postion-absolute {absolute;}
@each $pos in $positionList {
      .position-#{$pos} {
            position: #{$pos};
      }
}

//.overflow-x-scroll {overflow-x:scroll}
@each $dir in $overflowDirs {
      .#{$dir}-scroll {
            #{$dir}: scroll;
      }
}

//pt-5 {padding-top: 1vw}
.rounded-circle {
      border-radius: 50%;
}

@for $size from 1 through 50 {
      .rounded-#{$size} {
            border-radius: #{$size}vw;
      }

      @each $t_d_key, $t_d_val in $spaceTypes_Dirs {
            .#{$t_d_key}-#{$size} {
                  #{$t_d_val}: #{$size}vw;
            }
      }

      .mx-#{$size} {
            margin-left: #{$size}vw;
            margin-right: #{$size}vw;
      }

      .my-#{$size} {
            margin-top: #{$size}vw;
            margin-bottom: #{$size}vw;
      }

      .px-#{$size} {
            padding-left: #{$size}vw;
            padding-right: #{$size}vw;
      }

      .py-#{$size} {
            padding-top: #{$size}vw;
            padding-bottom: #{$size}vw;
      }
}

//top-0 {top:　0;}
@each $type, $val in $positionTypes {
      .#{$type}-0 {
            #{$val}: 0;
      }
}

//bg-white {background-color: white;}
@each $key, $val in $colors {
      .bg-#{"" + $key} {
            background-color: #{$val};
      }

      .text-#{"" + $key} {
            color: #{$val};
      }
}

//.border-pill {border-radius: 50rem}
@each $key, $val in $radiusList {
      .border-#{$key} {
            border-radius: #{$val};
      }
}

//.opacity-75 {opacity: 0.75}
@for $index from 0 through 4 {
      .opacity-#{$index * 25} {
            opacity: #{$index * 0.25};
      }
}

//.text-center {text-align: center}
@each $var in $textAlignDirs {
      .text-#{$var} {
            text-align: #{$var};
      }
}

//.border-bottom-1 {border-bottom: 1px} .border-bottom {border-bottom: 1px}
@for $size from 0 to 5 {
      @each $posKey, $posVal in $positionTypes {
            @if $size ==0 {
                  .border-#{$posKey} {
                        border-#{$posVal}: 1px solid #e6e6e6;
                  }
            }

            @else {
                  .border-#{$posKey}-#{$size} {
                        border-#{$posVal}: #{$size}px solid #e6e6e6;
                  }
            }
      }
}

@mixin placeholderColor($color) {
      &::input-placeholder {
            /*WebKit browsers*/
            color: $color;
      }

      &::-webkit-input-placeholder {
            /*WebKit browsers*/
            color: $color;
      }

      &::-moz-input-placeholder {
            /*Mozilla Firefox*/
            color: $color;
      }

      &::-ms-input-placeholder {
            /*Internet Explorer*/
            color: $color;
      }
}

@mixin ellipsisRow($row: 1) {
      @debug "$row is #{$row}";

      @if $row ==1 {
            // @debug "1行";
            @extend .text-ellipsis;
      }

      @else {
            // @debug "多行";
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box; // 作为弹性伸缩盒子模型显示。
            -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
            -webkit-line-clamp: #{$row}; // 显示的行
      }
}